<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			省份：<select name="" id="SFid" onchange="changeSF()">
				<option value="-1" >请选择省份</option>
			</select>
			城市：<select name="" id="CSid" onchange="changeCS()">
				<option value="-1" >请选择城市</option>
			</select>
			区县：<select name="" id="QXid" onchange="changeQS()">
				<option value="-1" >请选择区县</option>
			</select><br>
			你选择的城市是：<label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var SF=['浙江','广东','江西'];
		SF.push('福建');
		var CS=[
			['杭州','温州'],
			['广州','深圳'],
			['南昌','上饶'],
			['厦门','泉州']
		];
		var QX=[
			[['萧山区','西湖区'],['瓯海区','龙湾区']],
			[['黄浦区','海珠区'],['龙山区','南山区']],
			[['湾里区','青云谱区'],['广丰区','鄱阳']],
			[['集美区','湖里区'],['丰泽区','洛江区']]
			];
			function changeSF(){
				var SFobj=document.getElementById('SFid');
				var CSobj=document.getElementById('CSid');
				CSobj.innerHTML=`<option value="-1" >请选择城市</option>`;
				if (SFobj.value==-1) {
					return;
				}
				var cs=CS[SFobj.value];
				for (var i = 0; i < cs.length; i++) {
					CSobj.innerHTML+=`<option value="`+i+`" >`+cs[i]+`</option>`
				}
			}
			function changeCS(){
				var SFobj=document.getElementById('SFid');
				var CSobj=document.getElementById('CSid');
				var QXobj=document.getElementById('QXid');
				QXobj.innerHTML=`<option value="-1" >请选择城市</option>`;
				if (CSobj.value==-1) {
					return;
				}
				var qx=QX[SFobj.value][CSobj.value];
				for (var i = 0; i < qx.length; i++) {
					QXobj.innerHTML+=`<option value="`+i+`" >`+qx[i]+`</option>`;
					
				}
			}
			function changeQS(){
				var SFobj=document.getElementById('SFid');
				var CSobj=document.getElementById('CSid');
				var QXobj=document.getElementById('QXid');
				
				var SFname=SF[SFobj.value];
				var CSname=CS[SFobj.value][CSobj.value];
				var QXname=QX[SFobj.value][CSobj.value][QXobj.value];
				var selectobj=document.getElementById('selectValue');
				
				selectobj.innerText=SFname+","+CSname+","+QXname;
		
			}
		
		onload=function(){
			var SFobj=document.getElementById('SFid');
			for (var i = 0; i < SF.length; i++) {
				SFobj.innerHTML+=`<option value="`+i+`">`+SF[i]+`</option>`;
			}
		}
	</script>
</html>
